<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>springBoot+webSocket+广播式</title>
</head>
<body onload="disconnect()">
    <noscript>
        <h2 style="color: #ff0000">貌似你的浏览器不支持webSocket</h2>
    </noscript>
    <div>
        <div>
            <button id="connect" onclick = connect()>连接</button>
            <button id="disconnect" disabled="disabled" onclick="disconnect()">断开连接</button>
        </div>
        <div id="conversationDiv">
            <label>输入你的名字:</label>
            <input type="text" id="name">
            <button id="getName" onclick="getName()">确定</button><br>
            <div id="showInputContent">
                <label>请输入内容:</label>
                <input type="text" id="content">
                <button id="sendName" onclick="sendContent()">发送</button>
            </div>
            <p id="response"></p>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script type="text/javascript">
        var stompClient = null;

        function setConnected(connected) {
            document.getElementById("connect").disabled = connected;
            document.getElementById("disconnect").disabled = !connected;
            document.getElementById("conversationDiv").style.visibility = connected ? 'visible':'hidden';
            document.getElementById('showInputContent').style.visibility = 'hidden';
            $('#response').html();
        }
        //1.连接SockJS的endpoint名称为"endpointWisely"
        //2.使用STOMP子协议的WebSocket客户端
        //3.连接WebSocket 服务端
        //4.通过stompClient.send 向/welcome 目标(destination)发送消息，这个是在控制器的@MessageMapping中定义的
        //5.通过stompClient.send向/welcome 目标(destination)发送消息,这个是在控制器的@MessageMapping中定义的
        function connect() {
            var socket = new SockJS('/crm_boot/endpointWisely'); //1.
            stompClient = Stomp.over(socket);   //2.
            stompClient.connect({},function (frame) {   //3.
                setConnected(true);
                console.log('Connected: '+frame);
                stompClient.subscribe('/topic/getResponse',function (response) {    //4.
                    showResponse(JSON.parse(response.body).responseMessage);
                });
            });
        }
        function disconnect() {
            if (stompClient != null){
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }
        function getName() {
            document.getElementById('name').disabled = 'disabled';
            document.getElementById('getName').disabled = true;
            document.getElementById('showInputContent').style.visibility = 'visible';
        }
        function sendContent() {
            var name = $('#name').val();
            var content = $('#content').val();
            var allResponse = $('#response').html();
            allResponse = allResponse ? allResponse.concat('<br>') : allResponse;
            //5.
            stompClient.send("/welcome",{},JSON.stringify({'name':name,'content':content,"all":allResponse}));
        }
        function showResponse(message) {
            var response = $("#response");
            response.html(message);
        }
    </script>
</body>
</html>